<!doctype html>
<html lang="zh">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>三栏--圣杯布局-position-margin</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			.container {
				overflow: hidden;
				/* 为左右栏腾出空间 */
				padding-left: 200px;
				padding-right: 220px;
			}

			.left,
			.center,
			.right {
				position: relative;
				float: left;
				min-height: 130px;
			}

			.left {
				margin-left: -100%;
				left: -200px;
				width: 200px;
				background-color: teal;
			}

			.right {
				margin-left: -220px;
				right: -220px;
				width: 220px;
				background-color: green;
			}

			.center {
				width: 100%;
				background-color: violet;
				height: 400px;
			}
		</style>
	</head>

	<body>
		<!-- 
        ① 特点
        比较特殊的三栏布局，同样也是两边固定宽度，中间自适应，唯一区别是dom结构必须是先写中间列部分，这样实现中间列可以优先加载。   
        ③ 缺点
        center部分的最小宽度不能小于left部分的宽度，否则会left部分掉到下一行
        如果其中一列内容高度拉长(如下图)，其他两列的背景并不会自动填充。(借助等高布局正padding+负margin可解决)
     -->

		<!-- 
         ② 实现步骤
         三个部分都设定为左浮动，否则左右两边内容上不去，就不可能与中间列同一行。然后设置center的宽度为100%(实现中间列内容自适应)，此时，left和right部分会跳到下一行
         通过设置margin-left为负值让left和right部分回到与center部分同一行
         通过设置父容器的padding-left和padding-right，让左右两边留出间隙。
         通过设置相对定位，让left和right部分移动到两边。
      -->
		<div class="container">
			<div class="center">center</div>
			<div class="left">left</div>
			<div class="right">right</div>
		</div>
	</body>
</html>
